<template>
  <div class="btn">
    <el-button v-if="!imageUrl1 && !imageUrl2" @click="clickHandle"
      >点击上传签名</el-button
    >
    <div class="signBox">
      <img v-if="imageUrl1" :src="imageUrl1" alt="" />
      <img v-if="imageUrl2" :src="imageUrl2" alt="" />
      <el-select
        v-if="imageUrl1 && !imageUrl2"
        @change="change"
        v-model="value"
        placeholder="请选择考官"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.signImg"
        >
        </el-option>
      </el-select>
    </div>
    <el-button
      style="margin-left: 420px; margin-top: 30px"
      v-if="imageUrl1 && imageUrl2"
      @click="againChecked"
      >重新选择签名</el-button
    >
  </div>
</template>

<script>
import $api from "../utils/api";
export default {
  data() {
    return {
      imageUrl1: "",
      imageUrl2: "",
      value: "",
      options: [],
    };
  },
  props: {
    status: {
      type: String,
    },
  },
  created() {
    if (this.status == "2") {
      // 已经填过的直接取接口最新的签名数据
      this.userInfo = JSON.parse(localStorage.getItem("data"));
      let imgUrl1 = this.userInfo.examRecord.assessor1;
      let imgUrl2 = this.userInfo.examRecord.assessor2;
      if (imgUrl1 && imgUrl2) {
        this.imageUrl1 = "/api" + imgUrl1;
        this.imageUrl2 = "/api" + imgUrl2;
      }
    }
  },
  methods: {
    againChecked() {
      this.value = "";
      this.imageUrl2 = "";
      let examinerId = JSON.parse(localStorage.getItem("kgId"));
      $api.uploadsign(examinerId).then((res) => {
        if ((res.data.code = "200")) {
          this.options = res.data.data;
        }
      });
    },
    clickHandle() {
      this.$emit("clickUpload", true);
      this.imageUrl1 = "/api" + localStorage.getItem("imgUrl1");
      let examinerId = JSON.parse(localStorage.getItem("kgId"));
      if (examinerId) {
        $api.uploadsign(examinerId).then((res) => {
          // localStorage.setItem("imgUrl1", res.data.data[0]);
          // localStorage.setItem("imgUrl2", res.data.data[1]);
          if ((res.data.code = "200")) {
            this.options = res.data.data;
            // this.imageUrl1 = "/api" + res.data.data[0];
            // this.imageUrl2 = "/api" + res.data.data[1];
          }
        });
      }
    },
    change(e) {
      this.imageUrl2 = "/api" + this.value;
      localStorage.setItem("imgUrl2", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  margin: 15px;
}
img {
  width: 150px;
  height: 70px;
}
.signBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
